<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<!-- :style="{'top': sticky + 'px'}" -->
		<view class="top-box">
			<view class="top-nav">
				<!-- <view class="city-text" @click="addressShowFun">
					
					<image :src="imgUrl+'/city/Local.png'" class="localImage"></image>
					<view>{{cityName}}</view>
				</view> -->
				<view class="searchBox">
					<image :src="imgUrl+'/search/huiSearch.png'" mode="widthFix"></image>
					<input v-model="param.shop_name" type="text" @confirm="getShopList()"
						placeholder-style="font-weight: 400;font-size: 23rpx;color: #BCBCBC;" placeholder="请输入关键字"
						@input="search()" />
				</view>
			</view>
			<view class="tabsBox">
				<view class="type-box">
					<view class="item" @click="show = true">
						<view class="itemView">
							<view>{{selectIndex === null ? '全部分类' : selector[selectIndex].name}}</view>
							<!-- <image mode="aspectFit"
							src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/convenienceService/drop-arrow.png">
						</image> -->
							<u-icon name="arrow-down" class="downImage" color="#999999" size="16"></u-icon>
						</view>
						<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine"></image>
					</view>
					<view class="item" v-for="(v,i) in typeList" :key="i" :class="{activeCls:tabCurrent==i}"
						@click="tabsChange2(i)">
						<view>{{v.name}}</view>
						<image :src="imgUrl+'/career/xuxianLine.png'" class="xuxianLine"></image>
					</view>
				</view>
			</view>
		</view>
		<view :style="{'height': placeholderH + 'px'}"></view>
		<!-- selector -->
		<!-- <view :style="{height: (statusBarHeight) + 'px'}"></view> -->
		<view class="shopListBox" v-if="list.length>0">
			<!-- 附近门店 -->
			<view class="item" v-for="(v, index) in list" :key="index" @click="goShopDetails(v)">
				<view class="shop-img">
					<image :src="v.logo" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="title">{{v.shop_name}}</view>
					<view class="score-box">
						<view class="score-box-left">
							<view class="score">
								<rate :value="Math.round(v.average)"></rate>
							</view>
							<text class="score-text">{{v.average.toFixed(2)}}分</text>
						</view>
						<text class="ju">{{Math.round(v.distance/1000*100)/100}}KM</text>
						<!-- 距离： -->
					</view>
					<view class="address-box">
						<view class="left">
							<!-- <image class="location1" src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/shop/location-icon.png"> -->
							<!-- </image> -->
							<view class="district">{{v.map_punctuation || '商户暂无地理位置'}}</view>
						</view>
						<!-- <view class="goShopping">
              <text class="iconfont3">&#xe787;</text>
              <text class="text">去逛逛</text>
            </view> -->
					</view>
					<!-- <view class="location2-box">
              <image class="location2" src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/convenienceService/location2.png">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
				</view>
			</view>
		</view>
		<view>
			<noData v-if="list.length<=0"></noData>
		</view>
		<!-- 选择地区 -->
		<u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm"
			confirmColor="#FF211F" cancelColor="#474747" :itemHeight="55">
		</u-select>
		<u-picker mode="selector" v-model="show" :range="selector" range-key="name" :default-selector="[sIndex]"
			@confirm="confirmSelect" confirmColor="#FF211F" cancelColor="#474747"></u-picker>
	</view>
</template>

<script>
	import rate from "@/components/rate.vue"
	import noData from "@/components/noData/nodata.vue"
	export default {
		components: {
			rate,
			noData
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				sticky: uni.getSystemInfoSync().statusBarHeight + 44,
				placeholderH: 0,
				config: {
					back: true,
					title: '同城商家',
					color: 'black',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black',
					leftSlot: true,
					backIconColor: "#000",

				},
				cityName: '武汉市',
				sIndex: 0,
				param: {
					shop_name: '',
					order: 'distance',
					union_business: true,
					lon: '',
					lat: ''

				},
				setTime: null,
				addressShow: false,
				tabCurrent: 0,
				cityTree: [],
				typeList: [{
						name: '距离优先',
						order: 'distance'
					},
					{
						name: '评分优先',
						order: 'average'
					}
				],
				show: false,
				selector: [],
				selectIndex: null,
				list: [],
			}
		},
		onLoad(options) {
			if (options && options.id) {
				this.param.classify_id = options.id
			}
			if (options.cityName) {
				this.cityName = options.cityName
			}
			if (options.address) {
				this.param.address = options.address
			}
			if (options.area_code) {
				this.param.area_code = options.area_code
			}
			this.getCitys();
			this.getTppe(this.param.classify_id)
		},
		 onShow() {
			this.$nextTick(() => {
				this.$u.getRect('.top-box').then(res => {
					console.log(res)
					this.placeholderH = res.height
				})
			})
			 this.getCitys();
			 this.getTppe(this.param.classify_id)
		},
		onReady() {
			this.$nextTick(() => {
				this.$u.getRect('.top-box').then(res => {
					console.log(res)
					this.placeholderH = res.height
				})
			})
			 this.getCitys();
			 this.getTppe(this.param.classify_id)
			
		},
		onPullDownRefresh() {
			// this.getTppe()
		},
		methods: {
		addressShowFun() {
			uni.showLoading({
				title: '努力加载中...',
				mask: true
			});
			this.$http.get('/cnarea/tree-lbs').then(res => {
				if (res && res.code == 200) {
					this.cityTree = res.tree.children
					this.cityTree.forEach(v => {
						if (v.children.length <= 0) {
							v.children = [{}]
						}
					})
					if (this.cityTree) {
						this.addressShow = true
						uni.hideLoading();
					}
				}
			})
		},
			tabsChange2(index) {
				this.tabCurrent = index;
				this.param.order = this.typeList[index].order
				this.getShopList()
			},
			confirmSelect(e) {
				this.selectIndex = e[0]
				this.sIndex = e[0]
				this.getShopList()
			},
			// 跳转 门店详情
			goShopDetails(item) {
				uni.navigateTo({
					url: "/pages/nearbyShop/shopDetail?shopId=" + item.shop_id
				})
			},
			// 跳转商品详情
			goDetails(v) {
				uni.navigateTo({
					url: "/pages/convenienceService/shopDetails?shopId=" + v.shop_id
				})
			},
			// 获取城市
			getCitys() {
				this.$http.get('/cnarea/tree-lbs').then(res => {
					if (res && res.code == 200) {
						this.cityTree = res.tree.children
						this.cityTree.forEach(v => {
							if (v.children.length <= 0) {
								v.children = [{}]
							}
						})
					}
				})
			},
			// 选择地区
			addressConfirm(e) {
				// this.param.city_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
				this.cityName = e[2].label ? e[2].label : e[1].label ? e[1].label : e[0].label;
				this.param.area_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
				this.getShopList()
			},
			// 便民服务分类
			getTppe(id) {
				let that = this
				this.$http.get('/union/business/classify/list')
					.then(res => {
						if (res.code == 200) {
							this.selector = [{
								name: "全部分类",
								id: ""
							}, ...res.list];
							if (id) {
								this.selector.forEach((v, i) => {
									if (v.id == id) {
										this.selectIndex = i
									}
								})
							}
							// #ifdef H5
							this.getShopList()
							// #endif
							uni.getLocation({
								type: 'gcj02',
								geocode: true,
								success: function(res) {
									// that.cityName = res.address ? res.address.district : '';
									that.param.lon = res.longitude;
									that.param.lat = res.latitude;
									// that.getShopList()
									console.log("that.param23123123",that.param)
									
									that.$http.get('/service/goods/nearby', that.param).then(res => {
									  uni.stopPullDownRefresh()
									  if (res && res.code == 200) {
									    that.list = res.list;
									
									  }
									})
									if (!that.cityName) {
										uni.request({
											url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${res.longitude+','+res.latitude}`, //仅为示例，并非真实接口地址。
											method: "GET",
											header: {
												"content-type": "application/x-www-form-urlencoded"
											},
											success: (re) => {
												console.log(re);
												that.cityName = re.data.regeocode
													.addressComponent.city;
											}
										});
									}
								},
								complete(e) {
									console.log(e)
								}
							});
						}
					})
					.finally(() => {

					})
			},
			// 门店列表
			getShopList() {
				let that = this
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	geocode: true,
				// 	success: function(res) {
						// that.cityName = res.address ? res.address.district : '';
						// console.log("res地址",res)
						// that.param.lon = res.longitude;
						// that.param.lat = res.latitude;
						// that.getShopList()
						// if (!that.cityName) {
							// uni.request({
							// 	url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${that.param.lon+','+res.latitude}`, //仅为示例，并非真实接口地址。
							// 	method: "GET",
							// 	header: {
							// 		"content-type": "application/x-www-form-urlencoded"
							// 	},
							// 	success: (re) => {
							// 		console.log(re);
							// 		that.cityName = re.data.regeocode
							// 			.addressComponent.city;
							// 	}
							// });
							console.log("this.param23123123",this.param)
							
							this.$http.get('/service/goods/nearby', this.param).then(res => {
							  uni.stopPullDownRefresh()
							  if (res && res.code == 200) {
							    this.list = res.list;
							
							  }
							})
							
						// }
				// 	},
				// 	complete(e) {
				// 		console.log(e)
				// 	}
				// });

				if (this.selectIndex === null) {
					// this.param.category_id = null
				} else {
					this.param.classify_id = this.selector[this.selectIndex].id
				}
				console.log(this.param, 1111)
				this.$http.get('/service/goods/nearby', this.param).then(res => {
					uni.stopPullDownRefresh()
					if (res && res.code == 200) {
						this.list = res.list;

					}
				})
			},
			// 搜索防抖
			search() {
				clearTimeout(this.setTime)
				this.setTime = setTimeout(() => {
					this.getShopList()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		position: fixed;
		background-color: #F6F6F6;
		z-index: 3;
		width: 100%;
	}

	.top-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 85rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		width: 100%;
		padding: 0 36rpx;
		box-sizing: border-box;


	}

	.city-text {
		text-align: center;
		color: #474747;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;

		view {
			max-width: 100rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		// image {
		// 	width: 26rpx;
		// 	height: 36rpx;
		// 	margin-right: 10rpx;
		// 	vertical-align: middle;
		// }
	}

	.searchBox {
		display: flex;
		align-items: center;
		width: 100%;
		height: 62rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-left: 19rpx;
		padding-left: 19rpx;
		box-sizing: border-box;

		image {
			width: 28rpx;
			// height: 35rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		input {
			text-align: left;
		}
	}

	.tabsBox {
		width: 100%;
		background-color: #F9F9F9;
		padding: 0 19rpx;
		margin-top: 19rpx;

		.tabsBox_tabs {
			padding: 0 10rpx;

			/deep/ .u-tab-item {
				font-weight: 700;
			}
		}
	}

	.type-box {
		width: 711rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F9F9F9;
		height: 77rpx;


		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 237rpx;
			height: 77rpx;
			border-radius: 19rpx 0rpx 0rpx 19rpx;
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 27rpx;
			position: relative;




			// color: #4D4D4D;

			// &:first-child {
			// 	border-right: 0.5px solid #AAAAAA;
			// 	line-height: 15px;
			// 	min-width: 142rpx;
			// 	justify-content: start;
			// }

			// &:last-child {
			// 	border-left: 0.5px solid #AAAAAA;
			// 	line-height: 15px;
			// 	justify-content: end;
			// }

			image {
				width: 14rpx;
				height: 10rpx;
				margin-left: 10rpx;
				vertical-align: middle;
			}
		}

		.activeCls {
			color: #FF211F;
		}


		.item2 {
			margin-left: 100rpx;
			padding-top: 20rpx;
		}
	}

	.content-box {
		padding: 0 30rpx;
	}

	.shopListBox {
		width: 673rpx;
		height: auto;
		background: #f9f9f9;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin: 0 38rpx;
		margin-top: 19rpx;

		.shopListBox_item {
			margin-top: 30rpx;
		}

		.shopItem {
			// border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;

			.shopItem_title {
				font-size: 34rpx;
				color: #1A1A1A;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.shopItem_data {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;

				image {
					width: 22rpx;
					height: 30rpx;
				}

				>view {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
					}
				}

				.shopItem_data_distance {
					color: #666666;
				}
			}

			.gooodsBox {
				.gooods_item {
					display: flex;
					margin-top: 20rpx;

					image {
						width: 136rpx;
						height: 136rpx;
						margin-right: 35rpx;
						border-radius: 10rpx;
						flex-shrink: 0;
					}

					.gooods_item_r {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						>view {
							display: flex;
							align-items: center;
						}

						.gooods_item_r_title {
							font-size: 26rpx;
							color: #1A1A1A;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.gooods_item_r_price {
							font-size: 36rpx;
							color: #00BF5A;
							font-weight: 600;

							text {
								font-size: 20rpx;
								display: inline-block;
								margin-right: 10rpx;
							}
						}

						.gooods_item_r_expense {
							font-size: 26rpx;
							color: #666666;
							margin-left: 52rpx;
						}
					}
				}
			}

			.lookOther {
				font-size: 24rpx;
				color: #333333;
				width: 288rpx;
				height: 59rpx;
				border-radius: 8rpx;
				background: #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx auto 0;
			}
		}

		.item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			// border-bottom: 1rpx solid #e6e6e6;

			.shop-img {
				width: 115rpx;
				height: 115rpx;
				margin-right: 19rpx;
				border-radius: 15rpx;
				overflow: hidden;
				flex-shrink: 0;
				margin-left: 19rpx;
				margin-top: 19rpx;


				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;
				width: 0;
				height: 100%;
				padding-top: 19rpx;
				padding-bottom: 19rpx;

				.score-box,
				.address-box,
				.location2-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
				}

				.score-box-left {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
				}

				.location1,
				.location2 {
					width: 20rpx;
					height: 27rpx;
					flex-shrink: 0;
					margin-right: 9rpx;
				}

				.location2 {
					width: 23rpx;
					height: 27rpx;
				}

				.light-start,
				.startt {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				.title {
					font-weight: 600;
					font-size: 27rpx;
					color: #333333;
					line-height: 27rpx;
					margin-bottom: 19rpx;



				}

				.score-box {
					display: flex;
					align-items: normal;
					margin-bottom: 19rpx;
					color: #AAAAAA;
					padding-right: 19rpx;


					.score {
						flex-shrink: 0;
					}

					.score-text {
						text-align: left;
						flex-shrink: 0;
						margin-left: 4rpx;
						font-weight: 400;
						font-size: 23rpx;
						color: #333333;
						line-height: 27rpx;
					}

					.ju {
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 400;
						font-size: 23rpx;
						color: #333333;
						line-height: 27rpx;
					}
				}

				.address-box {
					// margin-bottom: 10rpx;
					color: #333333;
					justify-content: space-between;

					.left {
						flex: 1;
						width: 0;
						display: flex;
						align-items: center;
						text-align: left;
						font-weight: 400;
						font-size: 23rpx;
						color: #333333;
						line-height: 27rpx;

					}

					.district {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
						line-height: 1.3;
						width: 500rpx;
					}

					.goShopping {
						display: flex;
						align-items: center;
						font-size: 40rpx;
						color: #FF211F;
						flex-shrink: 0;

						.text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}
				}

				.location2-box {
					color: #333333;

					view {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}

	/deep/ .u-picker-header {
		border-radius: 20rpx 20rpx 0 0;
	}

	.localImage {
		width: 35rpx;
		height: 35rpx;
		margin-right: 4rpx;
	}

	.downImage {
		margin-left: 11rpx;
	}

	.xuxianLine {
		width: 3rpx !important;
		height: 28rpx !important;
		position: absolute;
		right: 0;
	}

	.itemView {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.shopListBox .item {
		padding: 0;
		height: auto;
		margin-bottom: 19rpx;
		background-color: #fff;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
</style>